<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .mainbox{
        height: 500px;
        width: 650px;
        background-color: transparent;
        margin: 0 auto;
        border-radius: 10px;
        border: 1px solid #000;
    }
    .dazi{
        width: 300px;
        height: 60px;
        background-color: transparent;
        float: left;
        font-size: 35px;
    }
    .jinxuan{
        height: 60px;
        width: 70px;
        background-color: transparent;
        float: left;
        font-size: 15px;
        text-align: center;
        line-height: 60px;
        cursor: pointer;
    }
    .meishi{
        font-size: 15px;
        text-align: center;
        line-height: 60px;
        height: 60px;
        width: 70px;
        background-color: transparent;
        float: left;
        cursor: pointer;
    }
    .baihuo{
        height:60px;
        width: 70px;
        background-color: transparent;
        float: left;
        font-size: 15px;
        text-align: center;
        line-height: 60px;
        cursor: pointer;
    }
    .gehu{
        height: 60px;
        width: 70px;
        background-color: transparent;
        float: left;
        font-size: 15px;
        text-align: center;
        line-height: 60px;
        cursor: pointer;

    }
    .yugao{
        width: 70px;
        height:60px;
        float: left;
        background-color: transparent;
        font-size: 15px;
        text-align: center;
        line-height: 60px;
        cursor: pointer;
        }
    .guanggao{
        height: 440px;
        width: 650px;
        background-color: transparent;
        float: inline-end;
    }
    .yugao:hover{
        color: red;
        text-decoration: underline 2px;
    }
    .jinxuan:hover{
        color: red;
        text-decoration: underline 2px;
    }
    .gehu:hover{
        color: red;
        text-decoration: underline 2px;
    }
    .meishi:hover{
        color: red;
        text-decoration: underline 2px;
    }
    .baihuo:hover{
        color: red;
        text-decoration: underline 2px;
    }
    img{
        width: 650px;
        height: 440px;
        display: none;
    }
</style>
<body>
    <div class="mainbox">
<div class="dazi"> &nbsp;每日特价</div>
<div class="jinxuan">精选</div>
<div class="meishi">美食</div>
<div class="baihuo">百货</div>
<div class="gehu">个护</div>
<div class="yugao">预告</div>
<div class="guanggao">
    <img src="C:\Users\zhh2\OneDrive\图片\Image_1707400293885_waifu2x_photo_noise3.png" alt="" data-type="jinxuan">
    <img src="C:\Users\zhh2\OneDrive\图片\初音未来 赏月 星空 4k壁纸 3840_2160_彼岸图网_waifu2x_photo_noise3.png" alt="" data-type="meishi">
    <img src="D:\图\原神雷电将军 天空闪电 4K电脑壁纸3840x2160_彼岸图网.jpg" alt="" data-type="baihuo">
    <img src="D:\图\152123-174306008318c3.jpg" alt="" data-type="gehu">
    <img src="D:\图\231320-171094760092e9.jpg" alt="" data-type="yugao">
</div>
    </div>
    <script>
        const jinxuan = document.querySelector('.jinxuan')
        const meishi = document.querySelector('.meishi')
        const baihuo = document.querySelector('.baihuo')
        const gehu = document.querySelector('.gehu')
        const yugao = document.querySelector('.yugao')
        const guanggao = document.querySelector('.guanggao')
        const images = document.querySelectorAll('.guanggao img')
        jinxuan.addEventListener('click',function(){
            const allimages = document.querySelectorAll('.guanggao img');
            allimages.forEach(img => {
                img.style.display='none';
            });
            document.querySelector('.guanggao img[data-type = "jinxuan"]').style.display = 'block';
        });
        meishi.addEventListener('click',function(){
            const allimages = document.querySelectorAll('.guanggao img');
            allimages.forEach(img => {
                img.style.display='none';
            });
            document.querySelector('.guanggao img[data-type = "meishi"]').style.display = 'block';
        });
        baihuo.addEventListener('click',function(){
            const allimages = document.querySelectorAll('.guanggao img');
            allimages.forEach(img => {
                img.style.display='none';
            });
            document.querySelector('.guanggao img[data-type = "baihuo"]').style.display = 'block';
        });
        gehu.addEventListener('click',function(){
            const allimages = document.querySelectorAll('.guanggao img');
            allimages.forEach(img => {
                img.style.display='none';
            });
            document.querySelector('.guanggao img[data-type = "gehu"]').style.display = 'block';
        });
        yugao.addEventListener('click',function(){
            const allimages = document.querySelectorAll('.guanggao img');
            allimages.forEach(img => {
                img.style.display='none';
            });
            document.querySelector('.guanggao img[data-type = "yugao"]').style.display = 'block';
        });
    </script>
</body>
</html>